<template>
  <el-form ref="ruleFormRef" :inline="true" :model="parkingSpace" class="demo-form-inline">

    <el-form-item label="停车场编号">
      <el-input v-model="parkingSpace.id" />
    </el-form-item>
    <el-form-item label="停车位状态">
      <el-select v-model="parkingSpace.region">
        <el-option label="已停" value="busy" />
        <el-option label="空闲" value="free" />
      </el-select>
    </el-form-item>
    <el-form-item label="停车位属性">
      <el-select v-model="parkingSpace.region">
        <el-option label="已停" value="busy" />
        <el-option label="空闲" value="free" />
      </el-select>
    </el-form-item>
    <el-form-item label="所属区域">
      <el-select v-model="parkingSpace.region" placeholder="省">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
      <el-select v-model="parkingSpace.region" placeholder="市">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
      <el-select v-model="parkingSpace.region" placeholder="区">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="所属道路">
      <el-select v-model="parkingSpace.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="所属停车场">
      <el-select v-model="parkingSpace.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="reset">重置</el-button>
      <el-button type="success" @click="onSearch" update:editConfirm>查询</el-button>
      <el-button type="warning" @click="addShow">新增</el-button>
      <el-button type="danger" @click="addShow">批量添加</el-button>
    </el-form-item>
    <AddParkingSpace/>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import useAddSpaceStore from '@/stores/ParkingSpace'
import AddParkingSpace from './components/AddParkingSpace.vue';
import { fetchParking} from '@a/index'
import router from '@/router';
import { defineEmits } from 'vue'
const emit = defineEmits(['editConfirm'])

const onSearch = () => {
    emit('editConfirm', parkingSpace)  // 之前子组件修改父组件的数据时需要添加'update:editConfirm'，但是触发父组件的方法不能加'update'
}
const addSpaceStore = useAddSpaceStore()
// 父组件 向 子组件 传参的使用
const props = defineProps({
  tableData: Object
  
})

const ruleFormRef = ref<FormInstance>()

const parkingSpace = reactive({
  id: '',
  user: '',
  region: '',
})

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const addShow = () => {
  addSpaceStore.toggleAddShowState()
  
}

</script>



<style scoped lang="scss">
.el-form{
  border-bottom: 2px dashed rgb(193, 192, 192);
  margin-bottom: 30px;
}
.el-form-item:last-child{
  position: absolute;
  right: 0;
}

</style>
